<template>
  <div class="body">
    <el-container>
      <!-- 头部导航栏 -->
      <el-header>
        <Index></Index>
      </el-header>
      <!-- 左侧边栏 -->

      <el-container>
        <el-container>
          <el-main>
            <div id="allmap">
               <el-row style="margin-bottom:20px;">
                 <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">
                  <font color="#A1FEDB" size="4">能量管理</font>
                </el-breadcrumb-item>
                <el-breadcrumb-item><font color="#A1FEDB"  size="4">发电预测</font></el-breadcrumb-item>
                
              </el-breadcrumb>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-row>
                    <span
                      style="color:#90F0D0;font-size:2rem;font-weight:blod;margin-left:2rem;"
                      >4小时预测</span
                    >
                  </el-row>
                  <el-row>
                    <div id="topology-canvas"></div>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row>
                    <span
                      style="color:#90F0D0;font-size:2rem;font-weight:blod;margin-left:2rem;"
                      >24小时预测</span
                    >
                  </el-row>

                  <div id="table4"></div>
                </el-col>
              </el-row>
              <el-row>
                <div>
                  <el-row>
                    <el-col :span="12">
                      <el-row>
                        <span
                          style="color:#90F0D0;font-size:2rem;font-weight:blod;margin-left:2rem;"
                          >3天预测</span
                        >
                      </el-row>

                      <div id="table1"></div>
                    </el-col>

                    <el-col :span="12">
                      <el-row>
                        <span
                          style="color:#90F0D0;font-size:2rem;font-weight:blod;margin-left:2rem;"
                          >7天预测</span
                        >
                      </el-row>

                      <div id="table3"></div>
                    </el-col>
                  </el-row>
                </div>
              </el-row>
            </div>
          </el-main>
        </el-container>
      </el-container>

      <!-- 表格显示区 -->

      <Bottom></Bottom>
    </el-container>
  </div>
</template>
<script>
import echarts from 'echarts'

import Index from '~/components/index2'
import Bottom from '~/components/bottom'
export default {
  data() {
    return {
      power1: [
        0,
        33,
        56,
        102,
        145,
        194,
        234,
        279,
        321,
        360,
        400,
        455,
        500,
        564,
        604,
        612,
        616
      ],
      power2: [
        0,
        67,
        145,
        452,
        543,
        243,
        172,
        52,
        23,
        78,
        153,
        235,
        389,
        300,
        256,
        178,
        67,
        32,
        135,
        234,
        356,
        234,
        132,
        76,
        12
      ],
      power3: [
        0,
        304,
        609,
        312,
        14,
        345,
        678,
        289,
        35,
        332,
        579,
        309,
        56,
        24,
        267,
        550,
        246,
        16,
        34,
        456,
        786,
        405,
        98,
        56,
        326,
        562,
        243,
        63
      ],
      power4: [
        0,
        33,
        56,
        102,
        145,
        194,
        234,
        300,
        360,
        410,
        450,
        480,
        500,
        455,
        400,
        360,
        321,
        279,
        234,
        194,
        145,
        102,
        56,
        33,
        0
      ]
    }
  },
  components: {
    Index,
    Bottom
  },
  computed: {
    scale() {
      return Math.floor(this.$store.state.canvas.data.scale * 100)
    },
    event() {
      return this.$store.state.event.event
    }
  },
  watch: {
    event(curVal) {
      if (this['handle_' + curVal.name]) {
        this['handle_' + curVal.name](curVal.data)
      }
    },
    $route(val) {
      this.open()
    }
  },
  created() {},

  mounted() {
    // this.readdata()
    this.laterpowercurve()

    //
  },

  methods: {
    // readdata() {
    //   this.$axios({
    //     method: 'get',
    //     params: {
    //       // name: name,
    //       date: this.value1
    //     },
    //     url: 'http://127.0.0.1:8082/totalloadloopdcdc/searchalldata'
    //   }).then(res => {
    //     console.log(res.data)
    //     this.power1 = res.data[0]
    //     this.power2 = res.data[1]
    //     this.power3 = res.data[2]
    //     this.formLabelAlign = res.data[3]
    //   })
    // },
    //延迟执行函数
    laterpowercurve() {
      setTimeout(() => {
        this.showecharts()
      }, 2000)
    },
    showecharts() {
      //
      let myChart1 = this.$echarts.init(
        document.getElementById('topology-canvas')
      )
      let myChart2 = this.$echarts.init(document.getElementById('table1'))
      let myChart3 = this.$echarts.init(document.getElementById('table3'))
      let myChart4 = this.$echarts.init(document.getElementById('table4'))
      let option1 = {
        // backgroundColor: '#005A5B',
        title: {
          // text: '配电网(单位/伏特)',
          textStyle: {
            color: '#ffffff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['发电预测']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            name: '分钟',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            data: [
              '10.00',
              '10.15',
              '10.30',
              '10.45',
              '11.00',
              '11.15',
              '11.30',
              '11.45',
              '12.00',
              '12.15',
              '12.30',
              '12.45',
              '13.00',
              '13.15',
              '13.30',
              '13.45',
              '14.00'
            ]
          }
        ],
        yAxis: [
          {
            name: 'kW',
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'white', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            type: 'value'
          }
        ],
        series: [
          {
            name: '发电量值',
            type: 'line',
            stack: '总量',
            smooth: true, //曲线平滑
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  //渐变色实现
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1, //变化度
                    //三种由深及浅的颜色
                    [
                      {
                        offset: 0,
                        color: '#3ebf9b'
                      },
                      {
                        offset: 0.5,
                        color: '#267268'
                      },
                      {
                        offset: 1,
                        color: '#14323f'
                      }
                    ]
                  )
                },
                lineStyle: {
                  //线的颜色
                  color: '#349e85'
                },
                //以及在折线图每个日期点顶端显示数字
                label: {
                  show: false,
                  position: 'top',
                  textStyle: {
                    color: 'white'
                  }
                }
              }
            },
            areaStyle: {},
            data: this.power1
          }
        ]
      }
      let option2 = {
        // backgroundColor: '#005A5B',
        title: {
          // text: '配电网(单位/伏特)',
          textStyle: {
            color: '#ffffff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['发电预测']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            name: '小时',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            data: [
              '00.00',
              '03.00',
              '06.00',
              '09.00',
              '12.00',
              '15.00',
              '18.00',
              '21.00',
              '24.00',
              '00.00',
              '03.00',
              '06.00',
              '09.00',
              '12.00',
              '15.00',
              '18.00',
              '21.00',
              '24.00',
              '00.00',
              '03.00',
              '06.00',
              '09.00',
              '12.00',
              '15.00',
              '18.00',
              '21.00',
              '24.00'
            ]
          }
        ],
        yAxis: [
          {
            name: 'kW',
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'white', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            type: 'value'
          }
        ],
        series: [
          {
            name: '发电量值',
            type: 'line',
            stack: '总量',
            smooth: true, //曲线平滑
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  //渐变色实现
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1, //变化度
                    //三种由深及浅的颜色
                    [
                      {
                        offset: 0,
                        color: '#3ebf9b'
                      },
                      {
                        offset: 0.5,
                        color: '#267268'
                      },
                      {
                        offset: 1,
                        color: '#14323f'
                      }
                    ]
                  )
                },
                lineStyle: {
                  //线的颜色
                  color: '#349e85'
                },
                //以及在折线图每个日期点顶端显示数字
                label: {
                  show: false,
                  position: 'top',
                  textStyle: {
                    color: 'white'
                  }
                }
              }
            },
            areaStyle: {},
            data: this.power2
          }
        ]
      }
      let option3 = {
        // backgroundColor: '#005A5B',
        title: {
          // text: '配电网(单位/伏特)',
          textStyle: {
            color: '#ffffff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['发电预测']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            name: '小时',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            data: [
              '00.00',
              '08.00',
              '16.00',
              '24.00',
              '00.00',
              '08.00',
              '16.00',
              '24.00',
              '00.00',
              '08.00',
              '16.00',
              '24.00',
              '00.00',
              '08.00',
              '16.00',
              '24.00',
              '00.00',
              '08.00',
              '16.00',
              '24.00',
              '00.00',
              '08.00',
              '16.00',
              '24.00',
              '00.00',
              '08.00',
              '16.00',
              '24.00'
            ]
          }
        ],
        yAxis: [
          {
            name: 'kW',
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'white', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            type: 'value'
          }
        ],
        series: [
          {
            name: '发电量值',
            type: 'line',
            stack: '总量',
            smooth: true, //曲线平滑
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  //渐变色实现
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1, //变化度
                    //三种由深及浅的颜色
                    [
                      {
                        offset: 0,
                        color: '#3ebf9b'
                      },
                      {
                        offset: 0.5,
                        color: '#267268'
                      },
                      {
                        offset: 1,
                        color: '#14323f'
                      }
                    ]
                  )
                },
                lineStyle: {
                  //线的颜色
                  color: '#349e85'
                },
                //以及在折线图每个日期点顶端显示数字
                label: {
                  show: false,
                  position: 'top',
                  textStyle: {
                    color: 'white'
                  }
                }
              }
            },
            areaStyle: {},
            data: this.power3
          }
        ]
      }
      let option4 = {
        // backgroundColor: '#005A5B',
        title: {
          // text: '配电网(单位/伏特)',
          textStyle: {
            color: '#ffffff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['配电网']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            name: '小时',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            data: [
              '1.0',
              '2.0',
              '3.0',
              '4.0',
              '5.0',
              '6.0',
              '7.0',
              '8.0',
              '9.0',
              '10.0',
              '11.0',
              '12.0',
              '13.0',
              '14.0',
              '15.0',
              '16.0',
              '17.0',
              '18.0',
              '19.0',
              '20.0',
              '21.0',
              '22.0',
              '23.0',
              '24.0'
            ]
          }
        ],
        yAxis: [
          {
            name: 'kW',
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'white', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            type: 'value'
          }
        ],
        series: [
          {
            name: '配网',
            type: 'line',
            stack: '总量',
            smooth: true, //曲线平滑
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  //渐变色实现
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1, //变化度
                    //三种由深及浅的颜色
                    [
                      {
                        offset: 0,
                        color: '#3ebf9b'
                      },
                      {
                        offset: 0.5,
                        color: '#267268'
                      },
                      {
                        offset: 1,
                        color: '#14323f'
                      }
                    ]
                  )
                },
                lineStyle: {
                  //线的颜色
                  color: '#349e85'
                },
                //以及在折线图每个日期点顶端显示数字
                label: {
                  show: false,
                  position: 'top',
                  textStyle: {
                    color: 'white'
                  }
                }
              }
            },
            areaStyle: {},
            data: this.power4
          }
        ]
      }

      myChart1.setOption(option1)
      myChart2.setOption(option2)
      myChart3.setOption(option3)
      myChart4.setOption(option4)

      window.addEventListener('resize', function() {
        myChart1.resize()
        myChart2.resize()
        myChart3.resize()
        myChart4.resize()
      })
      //
    }
  }
}
</script>
<style lang="scss">
.form .el-form-item__label {
  color: black;
}
.el-form-item__label {
  color: white;
}
.input1 .el-input__inner {
  width: 30rem;
  height: 3rem;

  border-radius: 4px;
  border: 1px solid #b6d8f1;
  color: #6a6f77;
  outline: 0;
}
</style>
<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100%;
  margin-top: 0px;
  background-image: url(../../assets/images/新UI12.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#topology-canvas {
  width: 99%;
  height: 368px;
  background-image: url(../../assets/images/新UI16.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
//控制画布的大小
.newbutton1 {
  position: absolute;
  left: 80%;
  top: 70px;
  z-index: 1;
}
.newbutton2 {
  position: absolute;
  left: 80%;
  top: 130px;
  z-index: 1;
}
.newbutton3 {
  position: absolute;
  left: 80%;
  top: 10px;
  z-index: 1;
}
.newbutton4 {
  position: absolute;
  left: 80%;
  top: 190px;
  z-index: 1;
}

.full {
  flex: 1;
  width: initial;
  position: relative;
  overflow: auto;
  background: #fff;

  background-image: url(../../assets/images/新UI26.png);
  background-repeat: no-repeat;
}

.context-menu {
  position: fixed;
  z-index: 10;
}
.el-button {
  width: 10rem;
  height: 45px;
  margin-top: 13px;
  margin-left: 13px;
  background-image: url(../../assets/images/新UI25.png);

  background-size: 100%;
  border-width: 1px;
  border-radius: 50px;
}

#table1 {
  width: 100%;
  height: 388px;
  background-image: url(../../assets/images/新UI16.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#table2 {
  width: 95%;
  height: 389px;
  margin-left: 0px;
  background-color: #005b5c;
  background-image: url(../../assets/images/新UI16.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#table3 {
  width: 90%;
  height: 321px;
  padding-top: 60px;
  padding-left: 30px;
  margin-left: 50px;
  background-image: url(../../assets/images/新UI16.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#table4 {
  width: 90%;
  height: 368px;
  margin-top: 10px;
  margin-left: 60px;
  padding-left: 0px;
  background-image: url(../../assets/images/新UI16.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#allmap {
  // height: 600px;
  // color: white;
  margin-top: 20px;
}
.newbutton {
  width: 284px;
  height: 48px;
  background-image: url(../../assets/images/新UI43.png);
  // border-color: #041214;
  display: inline-block;
}
.newstyle {
  // background-image: url(../assets/images/新UI.png);
  // padding-top: 50px;
  // margin-left: 23px;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
</style>
